<script setup>

</script>

<template>
  <div class="index-view">
    <div class="management">
      <div class="title">周边管理</div>
      <div class="explain">欢迎来到刺绣周边展示页面，探索刺绣的魅力，感受艺术之美，发现心灵的碰撞与交流。</div>
      <div class="try_it_now">
        <button>立即体验</button>
      </div>
      <div class="bg_img">
        <img src="/image/home1.jpg" alt="" draggable="false">
      </div>
    </div>
    <div class="figures_show">
      <div class="figures_left">
        <p class="title">传承人物展示</p>
        <p class="content">
          这里展示了许多传承刺绣文化的伟大人物，他们用心传承，汇聚了古老的智慧和现代的创新成果。让我们一同领略刺绣文…
        </p>
        <div class="try_it_now">
          <button>立即体验</button>
        </div>
      </div>
      <div class="figures_right">
        <img src="/image/home2.jpg" alt="" draggable="false">
      </div>
    </div>
    <div class="figures_featured">
      <div class="figures_left">
        <img src="/image/home3.png" alt="" draggable="false">
      </div>
      <div class="figures_right">
        <p class="title">传承人物精选</p>
        <p class="content">
          通过这些传承人物的故事和作品，让我们更深刻地理解刺绣文化的内涵，感受到传统技艺与现代生活的交融。
        </p>
        <div class="try_it_now">
          <button>立即体验</button>
        </div>
      </div>
    </div>
    <div class="video_show">
      <div class="head">
        <p class="title">视频展览</p>
        <div class="try_it_now">
          <button>立即体验</button>
        </div>
      </div>
      <div class="explain">品味刺绣文化，从视觉、听觉中感受无穷魅力，传达刺绣作品背后的文化内涵和艺术价值。</div>
      <div class="main">
        <div class="item1">
          <img src="/image/home4.jpg" draggable="false" alt="">
          <p class="title">视频展览</p>
          <div class="explain">发现刺绣之美，感受刺绣之魅，探索刺绣的无限可能</div>
        </div>
        <div class="item2">
          <img src="/image/home5.jpg" draggable="false" alt="">
          <p class="title">传承人物展示</p>
          <div class="explain">领略一代代传承者的匠心之作</div>
        </div>
        <div class="item3">
          <img src="/image/home6.jpg" draggable="false" alt="">
          <p class="title">新闻资讯展示</p>
          <div class="explain">掌握最新刺绣文化资讯</div>
        </div>
      </div>
    </div>
    <div class="evaluation">
      <div class="title">客户评价信息</div>
      <div class="explain">我们用心呈现，您用心感知，客户满意是我们最大的追求</div>
      <div class="main">
        <div class="item" v-for="i in   3">
          <div class="head">
            <div class="avatar_img">
              <img src="/image/home2.jpg" alt="">
            </div>
            <div class="info">
              <div class="name">张三</div>
              <div class="identity">设计师</div>
            </div>
          </div>
          <div class="content">
            张三先生非常满意我们的服务，认为我们的刺绣文化展示页面设计得非常有创意和品味，让他受益匪浅。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index-view {
  padding: 80px 170px 170px;
  display: flex;
  flex-direction: column;
  gap: 150px;

  .management {
    .title {
      text-align: center;
      font-size: 35px;
      font-weight: bold;
    }

    .explain {
      margin-top: 30px;
      text-align: center;
      font-size: 16px;
    }

    .try_it_now {
      text-align: center;
      margin-top: 20px;

      button {
        width: 260px;
        height: 55px;
        background-color: var(--cx-color1);
        color: white;
        font-size: 20px;
        font-weight: bold;
        border-radius: 7px;
        border: none;
        cursor: pointer;
      }
    }

    .bg_img {
      text-align: center;
      height: 390px;
      overflow: hidden;
      border-radius: 14px;
      margin-top: 50px;

      img {
        width: 100%;
        height: 900px;
        transform: translate(0px, -201.13px);
      }
    }
  }

  .figures_show {
    display: flex;
    gap: 50px;

    .figures_left {
      width: 50%;

      .title {
        margin-top: 80px;
        font-size: 35px;
        font-weight: bold;
      }

      .content {
        width: 75%;
        margin-top: 30px;
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 35px;
      }

      .try_it_now {
        margin-left: 100px;
        margin-top: 30px;

        button {
          width: 190px;
          height: 45px;
          background-color: var(--cx-color1);
          color: white;
          font-size: 20px;
          font-weight: bold;
          border-radius: 7px;
          border: none;
          cursor: pointer;
        }
      }
    }

    .figures_right {
      width: 50%;
      height: 330px;
      overflow: hidden;
      border-radius: 14px;

      img {
        width: 100%;
        height: 760px;
        transform: translate(0px, -200px);
      }
    }
  }

  .figures_featured {
    display: flex;

    .figures_left {
      width: 50%;
      height: 360px;
      overflow: hidden;
      border-radius: 14px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .figures_right {
      width: 50%;
      padding-left: 130px;

      .title {
        margin-top: 80px;
        font-size: 35px;
        font-weight: bold;
      }

      .content {
        margin-top: 30px;
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 35px;
      }

      .try_it_now {
        margin-left: 100px;
        margin-top: 30px;

        button {
          width: 190px;
          height: 45px;
          background-color: var(--cx-color1);
          color: white;
          font-size: 20px;
          font-weight: bold;
          border-radius: 7px;
          border: none;
          cursor: pointer;
        }
      }
    }
  }

  .video_show {
    .head {
      position: relative;

      .title {
        text-align: center;
        font-size: 35px;
        font-weight: bold;
      }

      .try_it_now {
        position: absolute;
        right: 20%;
        top: 50%;
        transform: translateY(-50%);

        button {
          width: 190px;
          height: 45px;
          background-color: var(--cx-color1);
          color: white;
          font-size: 20px;
          font-weight: bold;
          border-radius: 7px;
          border: none;
          cursor: pointer;
        }
      }
    }

    .explain {
      margin-top: 30px;
      text-align: center;
      font-size: 16px;
      letter-spacing: 2px;
    }

    .main {
      display: flex;
      gap: 40px;
      margin-top: 50px;

      .item1, .item2, .item3 {
        display: flex;
        flex-direction: column;
        width: 33%;

        img {
          width: 100%;
          height: 250px;
          object-fit: cover;
          border-radius: 14px;
        }

        .title {
          margin-top: 25px;
          margin-left: 30px;
          font-size: 20px;
          font-weight: bold;
        }

        .explain {
          text-align: left;
          margin-top: 20px;
          margin-left: 30px;
          font-size: 16px;
          letter-spacing: 2px;
        }
      }
    }
  }

  .evaluation {
    .title {
      text-align: center;
      font-size: 35px;
      font-weight: bold;
    }

    .explain {
      margin-top: 30px;
      text-align: center;
      font-size: 16px;
      letter-spacing: 2px;
    }

    .main {
      margin-top: 50px;
      display: flex;
      justify-content: center;
      row-gap: 30px;
      column-gap: 60px;
      flex-wrap: wrap;

      .item {
        width: 300px;
        height: 280px;
        border-radius: 14px;
        border: 1px solid rgb(218, 223, 229);
        padding: 30px;

        .head {
          display: flex;

          .avatar_img {
            width: 52px;
            height: 42px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 45%;
            }
          }

          .info {
            margin-left: 20px;

            .name {
              font-weight: bold;
            }

            .identity {
              margin-top: 5px;
              color: #666666;
            }
          }
        }

        .content{
          margin-top: 35px;
          letter-spacing: 5px;
          line-height: 25px;
          height: 150px;
          overflow-y: auto;
        }
      }
    }
  }
}
</style>